/*
* @Author: zhanghang
* @Date:   2018-06-20 15:55:10
* @Last Modified by:   zhanghang
* @Last Modified time: 2018-06-20 16:10:05
*/

import Vue from 'vue'
// :class="[isActive ? 'active' : '']" :class=[{active: !isActive}]
// :style = '[styles,styles2]'
new Vue({
  el: '#root',
  template: `<div :id="aaa" @click="handleClick" :class="{active: !isActive }" :style="styles">
              {{isActive ? 'acivte' : 'not active'}}
              {{arr.join(' ')}}
              {{Date.now()}}
              <p v-html="html"></p>
              <p>{{getJoinedArr(arr)}}</p>
            </div>`,
  data: {
    isActive: false,
    arr: [1, 2, 3],
    aaa: 'main',
    html: '<span>123</span>',
    styles: {
      color: 'red'
    },
    styles2: {
      color: 'red'
    }
  },
  methods: {
    handleClick () {
      alert('clicked') // eslint-disable-line
    },
    getJoinedArr (arr) {
      return arr.join(' ')
    }
  },
  computed: {
    classNames () {

    }
  }
})
